<!DOCTYPE html>
<html lang="en">
  <!-- head content -->
  <head>
    <meta charset="utf-8"/>
    <title>
      my test titile
    </title>
    <link rel="stylesheet" href="css/style-1.css">
  </head>
  <!-- body content -->
  <body>
    <h1>body1</h1>
    <h1 id="anchor-h1">anchor_h1</h1>
    <header role="my header role">my header
      <nav role="navigation">my nav
        <ul>
          <li><a href="first.com" title="first link read">first link</a></li>
          <li lang="es"><a href="second.com" title="second link read">second link</a></li>
          <li><a href="third.com" title="third link read">third link</a></li>
        </ul>
      </nav>
    </header>
    <h1 class="class-1" class="class-2">my body class-1 & class-2 h1 content</h1>
      <h2 lang="es" class="class-2">my body class-2 h2 es content</h2>
      <h2 class="class-1">my body h2 class-1 second content</h2>
        <h3 class="class-1">my body h3 class-1 content</h3>
          <h4 class="class-1">my body h4 class-1 content</h4>
            <h5 class="class-1">my body h5 class-1 content</h5>
              <h6 class="class-1">my body h6 class-1 content</h6>
    <main role="my main role">my main
      <article>
        <h1 id="main-article-h1-1">main article h1</h1>
        <p id="main-article-p-1">main article paragraph</p>
        <footer id="main-article-footer-1">this is article footer
          <p>main article footer paragraph</p>
          <address>this is address</address>
        </footer>
      </article>
      <section>
        <h2>main section one title</h2>
        <p>main section one paragraph</p>
      </section>
      <section>
        <h2>main section two title</h2>
        <p>main section two paragraph</p>
      </section>
    </main>
    <aside role="complementary">
      <h1>my aside h1</h1>
      <p>my aside paragragh</p>
    </aside>
    <footer>
      <p><small>&copy; Copyright All About LLC</small></p>
    </footer>
  </body>
  <body>
    <h1>body2</h1>
    <div class="container">
      <header role="banner">body2 container header</header>
      <main role="main">body2 container main</main>
    </div>
    <p>this is a paragraph<small>(some texts can be small)</small></p>
    <p>this is also a paragraph <strong>with strong <em>notification</em></strong> and some <em>other things</em>, which I don't know what I'm typing</p>
    <figure>
      <figcaption>figure figcaption</figcaption>
      <img src="img/img_1.png" width="300" height="175" title="img_1_title"/>
    </figure>
    <p>today is a <cite>rainy day</cite> which I dislike</p>
    <blockquote cite="blockquote cite">the blockquote
      <p>the paragraph in the blockquote</p>
    </blockquote>
    <q>what is the q <cite>works for?</cite> not sure</q>
    <p><time>Feb 13, 2022 at 10:15am</time></p>
    <p><time datetime="2022-02-13T10:18:23">time format</time></p>
    <p><time datetime="10h 20m 30s">duration format</time></p>
    <p>the <abbr>AA</abbr>(abbr attribute) can be set to <abbr title="abbr attribute">AA</abbr></p>
    <p>the definition of <dfn>dfn</dfn> is like this</p>
    <p>the sup is like <sup>this</sup></p>
    <p>also the sub is like <sub>this</sub></p>
    <p>we can del some text like <del>this</del>, and underline some text like <ins>this</ins></p>
    <p>we can add codes like <code>this function</code></p>
    <pre>
      <code>
        bool function(int a) {
          if (a == 1) {
            return true;
          }
          return false;
        }
      </code>
    </pre>
    <p>we can <mark>mark some important text</mark> by mark label</p>
    <p>force to change to<br>another line by br</p>
    <p>we use <span class="span">span to wrap some words and short sentences</span></p>
    <p>the meter bar: <meter value="0.80" min="0" max="1" title="meter bar">80% completed</meter></p>
    <p>the progress bar: <progress max="100" value="30" title="progress bar">30% status</progress></p>
    <a href="new-web.html" target="new tab">open link in a new tab</a>
    <p>we can <a href="#anchor-h1">jump to anchor-h1</a></p>
    <p>this is a link for <a href="mailto:address@email.com">address@email.com</a></p>
    <p>this is a link for <a href="tel:+18888888888">18888888888</a></p>
  </body>

  <body>
    <div class="all-corners"></div>
    <div class="one-corner"></div>
    <div class="elliptical-corners"></div>
    <div class="circle"></div>
  </body>

  <body>
    <h1>Create a New Accout</h1>
    <form method="post" action="show-data.php">
      <!-- all form elements -->
      <fieldset>
        <h2 class="hdr-account">Account</h2>
        <div class="fields">
          <p class="row">
            <label for="first-name">First Name:</label>
            <input type="text" id="first-name" name="first_name" class="field-large" placehoder="first_name">
          </p>
          <p class="row">
            <label for="last-name">Last Name:</label>
            <input type="text" id="last-name" name="last_name" class="field-large">
          </p>
          <p class="row">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password">
          </p>
        </div>
      </fieldset>
      <!-- submit button -->
      <input type="submit" value="Create Account" class="btn">
    </form>
  </body>

  <body>
    <table>
      <caption>Qurterly Financials for 1962-1964 (in Thousands)</caption>
      <thread> <!-- head of table -->
        <tr>
          <th scope="col">Qurter</th>
          <th scope="col">1962</th>
          <th scope="col">1963</th>
          <th scope="col">1964</th>
        </tr>
      </thread>
      <tbody> <!-- body of table -->
        <tr>
          <th scope="row">Q1</th>
          <td>$145</td>
          <td>$167</td>
          <td>$161</td>
        </tr>
        <tr>
          <th scope="row">Q2</th>
          <td>$140</td>
          <td>$159</td>
          <td>$164</td>
        </tr>
        <tr>
          <th scope="row">Q3</th>
          <td>$153</td>
          <td>$153</td>
          <td>$168</td>
        </tr>
      </tbody>
      <tfoot> <!-- foot of table -->
        <tr>
          <th scope="row">TOTAL</th>
          <td>$595</td>
          <td>$648</td>
          <td>$664</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>